<template>

  <el-form :model="searchMapRef" :inline="true" label-width="auto">
    <el-form-item label="学生姓名" prop="name" style="width: 200px;">
      <el-input v-model="searchMapRef.name">
      </el-input>
    </el-form-item>
    <!-- 学习方向 -->
    <el-form-item label="学习方向" style="width: 200px;">
      <el-select v-model="searchMapRef.direction">
        <el-option v-for="(item, index) in directionList" :value="item" :key="index"></el-option>
      </el-select>
    </el-form-item>
    <!-- //班级 -->
    <el-form-item label="班级" prop="class" style="width: 200px;">
      <el-select v-model="searchMapRef.class">
        <el-option v-for="c in classList" :value="c.classname" :key="c._id">
        </el-option>
      </el-select>
    </el-form-item>

    <!-- 授课老师 -->
    <el-form-item label="授课老师" prop="teacher_id" style="width: 200px;">
      <!-- 把所有老师进行选择 -->
      <el-select v-model="searchMapRef.teacher_id">
        <el-option v-for="u in tearchList" :label="u.name" :value="u._id" :key="u._id"></el-option>
      </el-select>
    </el-form-item>
    <!-- 学管老师 -->
    <el-form-item label="学管老师" prop="manager_id" style="width: 200px;">
      <el-select v-model="searchMapRef.manager_id">
        <el-option v-for="u in manageList" :label="u._id" :value="u._id" :key="u._id"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>


      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="info" @click="resetForm">重置</el-button>
      <el-button type="primary" @click="gotoAdd">添加学生</el-button>
    </el-form-item>

    <el-table :data="stuList">
      <el-table-column type="expand">
        <template #default="props">
          <el-card style="max-width: 480px">
            <p v-for="(value, key) in props.row" :key="key" class="text item">{{ key }} : {{ value }}</p>
          </el-card>
        </template>
      </el-table-column>
      <el-table-column type="index" label="索引" width="100">
        <template #default="scope">
          {{ scope.$index + 1 + sizeRef * (npRef - 1) }}
        </template>
      </el-table-column>
      <el-table-column label="学生姓名" prop="name">
      </el-table-column>
      <el-table-column type="index" label="索引" width="100">
        <template #default="scope">
          {{ scope.$index + 1 + sizeRef * (npRef - 1) }}
        </template>
      </el-table-column>
      <el-table-column label="学生姓名" prop="name">
      </el-table-column>
      <el-table-column label="性别" prop="gender">
      </el-table-column> <el-table-column label="学习方向" prop="direction">
      </el-table-column>
      <el-table-column label="学历" prop="education">
      </el-table-column>
      <el-table-column label="操作">

        <template #default="scope">
          <el-button type="primary" size="large" @click="update(scope.row._id)">修改</el-button>


          <el-popconfirm title="确定删除这个学生吗?" @confirm="deleStu(scope.row._id)">
            <template #reference>
              <el-button type="danger" size="large">删除</el-button>
            </template>
          </el-popconfirm>




        </template>
      </el-table-column>
    </el-table>

    <el-pagination layout="total, sizes, prev, pager, next, jumper" v-model:current-page="npRef"
      v-model:page-size="sizeRef" :page-sizes="[5, 10, 20, 50]" :total="totalRef"></el-pagination>

  </el-form>
</template>

<script setup lang="ts">
//@ts-ignore

import router from '@/router';
import { allBaseList } from '../allBaseList';
import { useSearchStuMsg } from './useSearchStuMsg';
import { useShowStu } from './useShowStu';
//@ts-ignore
import { onMounted, ref, watch, watchEffect } from 'vue';
import { ElMessage } from 'element-plus';
import { reqDelStu } from '@/api/reqStu';



const gotoAdd = () => {
  router.push({ name: "add" })
}


const { stuList,
  changeRef,
  npRef,
  sizeRef,
  totalRef,
  getAllStuByPage, } = useShowStu()

const {
  directionList,
  tearchList,
  manageList,
  classList,
  gradeList,
  educationalLevelList,
  schoolList,
  majorList,
} = allBaseList()

const { searchMapRef,
  checkSearch,
  reset, } = useSearchStuMsg()


const update = (id: string) => {
  router.push({
    name: "edit",
    params: {
      id
    }
  })
}


//搜索和展示用的后端方法是一样 的，只不过就是展示是没有搜索条件，搜索是由搜索条件，让搜索的时候每页只显示一个，就能吃法watch。不搜索的情况下就让每页显示五个，页数变化触发watch。甚至都用不上changeRef。
const search = () => {
  if (checkSearch()) {
    ElMessage.error("请输入查询内容")
  } else {
    sizeRef.value = 1
    getAllStuByPage(npRef.value, sizeRef.value, searchMapRef.value);
  }
}

const resetForm = () => {
  sizeRef.value = 5
  reset()
}

//删除学生


const deleStu = async (_id: string) => {
  const { status } = await reqDelStu(_id)
  console.log((status));

  if (status === 0) {
    getAllStuByPage(npRef.value, sizeRef.value, searchMapRef.value);
  }
}


watch([npRef, sizeRef, totalRef], () => {
  getAllStuByPage(npRef.value, sizeRef.value, searchMapRef.value);
})


onMounted(() => {
  getAllStuByPage(npRef.value, sizeRef.value, searchMapRef.value);
})
</script>

<style></style>